/**
 * Created by zhouli on 18/3/13
 * Email li.zhou@huilianyi.com
 */
import React from 'react';
import {connect} from 'react-redux';
import {
  Table, Button, Badge, message, Icon, Input, Menu,
  Dropdown, Modal, Upload, Popover
} from 'antd';
import ImportErrInfo from 'components/template/import-err-info';
import FileSaver from 'file-saver';
import CCService from 'containers/setting/cost-center/cost-center.service';
import menuRoute from 'routes/menuRoute';
import BasicInfo from 'components/basic-info';
import 'styles/setting/cost-center/cost-center-detail.scss';
import {SelectDepOrPerson} from 'components/index';
import {deepCopy, messages} from 'share/common';
import ExportModal from 'components/template/export-modal/export-modal';
import ResizeTable from 'components/resize-table';
import {superThrottle, getSubText} from 'share/common';

class CostCenterDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      dataAll: false, // 是否全选的标志
      reverseSelectionMap: {}, // 当全选的时候，记住这些没勾选的,每一页一个key

      showImportBankModel: false, // 导入弹窗 成本中心项模板
      showImportBankModelForPerson: false, // 成本中心项-人员模板
      showImportErrInfo: false,
      showImportErrInfoForPerson: false,
      requestGapTime: 500,

      progressImportErrInfo: 1,
      transactionOID: null,
      errorsList: [],
      fileList: [],
      flieUploading: false, // 文件是否正在上传

      editing: false,
      // 成本中心项列表
      data: [],
      pagination: {
        total: 0,
        page: 0,
        pageSize: 10,
      },
      // 被选择了的成本中心项
      selectedRowKeys: [],
      costCenterItemName: '', // 输入搜索成本中心项名称与code
      costCenterExtendFiled: menuRoute.getRouteItem('cost-center-extend-filed', 'key'), // 成本中心扩展字段
      columns: [
        {
          title: messages('setting.key284'/* 成本中心项名称*/),
          dataIndex: 'name',
          width: '15%',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key1517')/* 父级成本中心项*/,
          dataIndex: 'parentCostCenterItemName',
          width: '15%',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key285'/* 编码*/),
          dataIndex: 'code',
          width: '15%',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key286'/* 序号*/),
          dataIndex: 'sequenceNumber',
          width: '10%'
        },
        {
          title: messages('setting.key287'/* 经理*/),
          dataIndex: 'managerFullName',
          width: '15%',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key288'/* 全员可见性*/),
          dataIndex: 'public',
          render: enabled => (
            <Badge
              status={enabled ? 'success' : 'error'}
              text={enabled ? messages('common.status.enable') : messages('common.status.disable')}/>)
        },
        {
          title: messages('setting.key289'/* 状态*/),
          dataIndex: 'enabled',
          render: enabled => (
            <Badge
              status={enabled ? 'success' : 'error'}
              text={enabled ? messages('common.status.enable') : messages('common.status.disable')}/>)
        },
        {
          title: messages('common.operation'), // "操作",
          dataIndex: 'id',
          render: (text, record) => (
            <span>
              <a onClick={e => this.editCostCenterItem(e, record)}>
                {messages('common.edit')}
              </a>
              &nbsp;&nbsp;&nbsp;
              <a onClick={e => this.detailCostCenterItem(e, record)}>
                {messages('common.detail')}
              </a>
            </span>)
        },
      ],
      updateState: false,
      infoList: [
        {
          type: 'input',
          label: messages('setting.key290'/* 成本中心名称*/),
          id: 'name',
          disabled: true
        },
        {
          type: 'input',
          label: messages('setting.key1518')/* 父级成本中心*/,
          id: 'parentCostCenterName',
          disabled: true
        },
        {
          type: 'input',
          label: messages('setting.key285'/* 编码*/),
          id: 'code',
          disabled: true
        },
        {
          type: 'input',
          label: messages('setting.key291'/* 账套名称*/),
          id: 'setOfBooksName',
          disabled: true
        },
        {
          type: 'input',
          label: messages('setting.key286'/* 序号*/),
          id: 'sequenceNumber',
          disabled: true
        },
        {
          type: 'switch',
          label: messages('setting.key289'/* 状态*/),
          id: 'enabled'
        },
      ],
      infoData: {},
      // 成本中心列表
      costCenter: menuRoute.getRouteItem('cost-center'),
      // 成本中心项：编辑与新增
      newCostCenterItem: menuRoute.getRouteItem('new-cost-center-item'),
      // 成本中心项：详情
      CostCenterItemDetail: menuRoute.getRouteItem('cost-center-item-detail'),
      downloading: false,
    };
  }

  componentDidMount() {
    this.getCostCenterDetail();
    // 记住页码
    const _pagination = this.getBeforePage('CostCenterDetail');
    const pagination = this.state.pagination;
    pagination.page = _pagination.page;
    pagination.current = _pagination.page + 1;
    this.setState({
      pagination,
    }, () => {
      this.clearBeforePage('CostCenterDetail');
      this.getList();
    });
  }

  getCostCenterDetail() {
    CCService.getCostCenterDetail(this.props.params.id)
      .then((response) => {
        this.setState({
          infoData: response.data,
        });
      });
  }

  // 得到列表数据
  // isClearRowSelection boolean是否清空选中的
  getList(isClearRowSelection) {
    this.setState({loading: true});
    const {pagination} = this.state;
    const params = {
      page: pagination.page,
      size: pagination.pageSize,
      keyword: this.state.costCenterItemName,
      sort: null// 是否按照code排序
    };
    CCService.getCostCenterItemsAll(this.props.params.id, params)
      .then((response) => {
        if (isClearRowSelection) {
          this.clearRowSelection();
        }
        const oids = [];
        response.data.map((item) => {
          item.key = item.id;
          oids.push(item.costCenterItemOID);
        });
        pagination.total = response.total;
        pagination.current = params.page + 1;
        this.setState({
          data: response.data,
          loading: false,
          pagination
        }, () => {
          if (this.state.dataAll) {
            // 如果有全选全部,翻页就立即勾选,并且需要排除掉没有勾选的
            const reverseSelectionMap = this.state.reverseSelectionMap;
            const currentPageUnselected = reverseSelectionMap[this.state.pagination.page];
            const currentPageSelected = CCService.getSelected(oids, currentPageUnselected);
            this.onSelectChange(currentPageSelected);
          }
        });
      });
  }

  // 分页点击
  onChangePager = (pagination, filters, sorter) => {
    this.setState({
      pagination: {
        page: pagination.current - 1,
        pageSize: pagination.pageSize
      }
    }, () => {
      this.getList();
    });
  };

  // 新增成本中心项
  handleNew = () => {
    let path = this.state.newCostCenterItem.url.replace(':id', this.props.params.id).replace(':itemId', 'NEW');
    path = path.replace(':itemId', 'NEW');
    // 父级成本中心传过去，需要选择父级成本中心项
    path = path.replace(':costCenterOID', this.state.infoData.parentCostCenterOID);
    this.context.router.push(`${path}?type=${this.state.infoData.code}`);
  };

  // 成本中心项编辑
  editCostCenterItem = (e, record) => {
    this.setBeforePage(this.state.pagination, 'CostCenterDetail');
    let path = this.state.newCostCenterItem.url.replace(':id', this.props.params.id);
    path = path.replace(':itemId', record.costCenterItemOID);
    // 父级成本中心传过去，需要选择父级成本中心项
    path = path.replace(':costCenterOID', this.state.infoData.parentCostCenterOID);
    this.context.router.push(`${path}?type=${this.state.infoData.code}`);
  };

  // 成本中心项详情
  detailCostCenterItem = (e, record) => {
    this.setBeforePage(this.state.pagination, 'CostCenterDetail');
    let path = this.state.CostCenterItemDetail.url.replace(':id', this.props.params.id);
    path = path.replace(':itemId', record.costCenterItemOID);
    this.context.router.push(`${path}?type=${this.state.infoData.code}`);
  };

  // 批量关联人员到成本中心项
  batchAddPerson = (arr) => {
    if (arr.length < 1) {
      message.warn(messages('setting.key292'/* 请选择人员*/));
      return;
    }
    const userOIDs = [];
    arr.map((item) => {
      userOIDs.push(item.userOID);
    });
    let params = null;
    if (this.state.dataAll) {
      const costCenterItemOIDs = CCService.getReverseSelection(deepCopy(this.state.reverseSelectionMap));
      params = {
        userOIDs,
        costCenterItemOIDs,
        selectMode: 'all_page',
        costCenterOID: this.props.params.id
      };
    } else {
      if (this.state.selectedRowKeys.length < 1) {
        message.warn(messages('setting.key293'/* 请选择成本中心项*/));
        return;
      }
      params = {
        userOIDs,
        costCenterItemOIDs: this.state.selectedRowKeys,
        selectMode: 'default',
        costCenterOID: this.props.params.id
      };
    }
    CCService.costCenterItemAssociateUsersDTO(params)
      .then((res) => {
        message.success(messages('setting.key294'/* 操作成功*/));
      });
  };

  // 选中项发生变化的时的回调
  onSelectChange = (selectedRowKeys) => {
    this.setState({selectedRowKeys});
    if (this.state.dataAll) {
      // 如果有全选标志，需要记住没选的
      const reverseSelectionMap = this.state.reverseSelectionMap;
      const allKeys = this.state.data.map(item => item.costCenterItemOID);
      const unSelectedData = CCService.getUnSelected(deepCopy(allKeys), deepCopy(selectedRowKeys));
      reverseSelectionMap[this.state.pagination.page] = unSelectedData;

      this.setState({
        reverseSelectionMap,
      });
    } else {
      // 不需要记住
      this.setState({
        reverseSelectionMap: {}
      });
    }
  };

  // 批量启用禁用
  // type enabled启用 disabled禁用
  handleBatch = (type) => {
    let enable = false;
    if (type === 'enabled') {
      enable = true;
    }
    let data = null;
    if (this.state.dataAll) {
      // 反选模式
      data = {
        costCenterOID: this.props.params.id,
        costCenterItemOIDs: CCService.getReverseSelection(deepCopy(this.state.reverseSelectionMap)),
        enable,
        selectMode: 'all_page',
      };
    } else {
      if (this.state.selectedRowKeys.length < 1) {
        // 请选择成本中心项
        message.warn(messages('setting.key293'/* 请选择成本中心项*/));
        return;
      }
      // 正常模式
      data = {
        costCenterOID: this.props.params.id,
        costCenterItemOIDs: this.state.selectedRowKeys,
        enable,
        selectMode: 'default',
      };
    }
    CCService.batchUpdateWithMode(data)
      .then((res) => {
        message.success(messages('common.operate.success'));
        this.getList(true);
      });
  };

  // 清空选择框：选了的成本中心项
  clearRowSelection() {
    this.setState({
      selectedRowKeys: []
    });
  }

  // 返回成本中心
  backToCostCenter = () => {
    const path = this.state.costCenter.url;
    const {page, setOfBooksId} = this.props.params;
    this.context.router.push(path.replace(':setOfBooksId', setOfBooksId).replace(':page', page));
  };

  // 搜索成本中心项
  emitEmptyForDep = () => {
    this.userNameInput.focus();
    this.setState({costCenterItemName: ''}, () => {
      this.onChangeCostCenterItemName();
    });
  };
  // 节流函数
  onChangeSetUserDepName = superThrottle(() => {
    this.onChangeCostCenterItemName();
  }, 500, 3000);
  // 为了节流函数
  onInputUserDepName = (e) => {
    this.setState({costCenterItemName: getSubText(e.target.value, 100)});
  };
  // 搜索成本中心项
  onChangeCostCenterItemName = (e) => {
    const {pagination} = this.state;
    pagination.page = 0;
    this.setState({
      loading: true,
      pagination
    }, () => {
      this.getList(true);
    });
  };

  handleImportShow = () => {
    this.setState({
      showImportBankModel: true
    });
  };

  handleImportShowForPerson = () => {
    this.setState({
      showImportBankModelForPerson: true
    });
  };

  cancelImport = () => {
    this.setState({
      showImportBankModel: false
    });
  };

  cancelImportForPerson = () => {
    this.setState({
      showImportBankModelForPerson: false
    });
  };

  // 人员导入的错误信息-start
  showImportErrInfo = () => {
    this.setState({
      showImportErrInfo: true
    });
  };

  showImportErrInfoForPerson = () => {
    this.setState({
      showImportErrInfoForPerson: true
    });
  };

  hideImportErrInfo = () => {
    this.setState({
      showImportErrInfo: false
    });
  };

  hideImportErrInfoForPerson = () => {
    this.setState({
      showImportErrInfoForPerson: false
    });
  };

  // 成本中心导入的错误信息-end
  handleFileUpload = () => {
    const {fileList} = this.state;
    const formData = new FormData();
    formData.append('file', fileList[0]);
    this.setState({
      uploading: true,
      flieUploading: true,
    });
    CCService.importTemplateCostCenterOID(this.props.params.id, formData)
      .then((res) => {
        this.setState({
          fileList: [],
          uploading: false,
          flieUploading: false,
          showImportBankModel: false,
          transactionOID: res.data.transactionOID// 这个transactionOID在导出错误信息的时候，需要用到
        }, () => {
          this.showImportErrInfo();
          this.state.requestGapTime = 500;
          this.showTransactionLogDialog(this.state.transactionOID);   // 将参数传给dialog
        });
      })
      .catch((res) => {
        this.setState({
          uploading: false,
          flieUploading: false,
        });
      });
  };

  // 人员导入的错误信息-end
  handleFileUploadForPerson = () => {
    const {fileList} = this.state;
    const formData = new FormData();
    // fileList.forEach((file) => {
    //   formData.append('files[]', file);
    // });
    formData.append('file', fileList[0]);
    this.setState({
      uploading: true,
      flieUploading: true,
    });
    CCService.importTemplateCostCenterPersonOID(formData)
      .then((res) => {
        this.setState({
          fileList: [],
          uploading: false,
          flieUploading: false,
          showImportBankModelForPerson: false,
          transactionOID: res.data.transactionOID// 这个transactionOID在导出错误信息的时候，需要用到
        }, () => {
          this.showImportErrInfoForPerson();
          this.state.requestGapTime = 500;
          this.showTransactionLogDialog(this.state.transactionOID);   // 将参数传给dialog
        });
      })
      .catch((res) => {
        this.setState({
          uploading: false,
          flieUploading: false,
        });
      });
  };

  showTransactionLogDialog = (transactionOID) => {
    this.state.requestGapTime += this.state.requestGapTime;
    CCService.getCostCenterBatchTransactionLog(transactionOID)
      .then((res) => {
        const data = res.data;
        if (data.totalEntities === 0) {
          this.hideImportErrInfo();
          this.hideImportErrInfoForPerson();

        } else {
          const errors = data.errors;
          const errorsList = this.getErrorDataByerrors(errors);
          const progressImportErrInfo = this.getProgressByData(data);
          this.setState({
            progressImportErrInfo,
            errorsList
          });
          if ((data.successEntities + data.failureEntities) !== data.totalEntities) {
            setTimeout(() => {
              // 请求频率涉及到一个算法
              this.showTransactionLogDialog(this.state.transactionOID);   // 将参数传给dialog
            }, this.state.requestGapTime);
          } else {
            // 导入完成了
            this.getList(true);
            if (this.state.errorsList.length === 0 && progressImportErrInfo === 100) {
              message.success(messages('common.operate.success'));
              this.hideImportErrInfo();
              this.hideImportErrInfoForPerson();
            }
          }
        }
      });
  };

  // 获取百分进度
  getProgressByData = data => Math.round((data.failureEntities + data.successEntities) * 100 / data.totalEntities);

  // 通过错误信息，解析成表格
  getErrorDataByerrors = (errs) => {
    const data = [];
    for (const key in errs) {
      const row = {};
      row.line = errs[key];
      if (row.line.length > 1) {
        const _line = [];
        for (let i = 0; i < row.line.length; i++) {
          _line.push(row.line[i]);
          if (i < row.line.length - 1) {
            _line.push(',');
          }
        }
        row.line = _line;
      }
      row.msg = key;
      data.push(row);
    }
    return data;
  };

  // 下载模板：成本中心项
  downloadTemplate = () => {
    this.setState({
      downloading: true,
    });
    CCService.downloadCostCenterItemTemplate()
      .then((res) => {
        const b = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
        const name = messages('setting.key295'/* 成本中心项模板*/);
        FileSaver.saveAs(b, `${name}.xlsx`);
        this.setState({
          downloading: false,
        });
      })
      .catch((res) => {
        this.setState({
          downloading: false,
        });
      });
  };

  // 下载模板：成本中心项-人员
  downloadTemplatePerson = () => {
    this.setState({
      downloading: true,
    });
    CCService.downloadCostCenterItemPersonTemplate()
      .then((res) => {
        const b = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
        const name = messages('setting.key296'/* 成本中心项-人员模板*/);
        FileSaver.saveAs(b, `${name}.xlsx`);
        this.setState({
          downloading: false,
        });
      })
      .catch((res) => {
        this.setState({
          downloading: false,
        });
      });
  };

  // 成本中心项导入错误信息
  exportFailedLog = () => {
    CCService.exportCostCenterBatchTransactionLog(this.state.transactionOID)
      .then((res) => {
        const b = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
        const name = messages('setting.key297'/* 成本中心项导入错误信息*/);
        FileSaver.saveAs(b, `${name}.xlsx`);
      });
  };

  // 成本中心项-人员导入错误信息
  exportFailedLogForPerson = () => {
    CCService.exportCostCenterPersonBatchTransactionLog(this.state.transactionOID)
      .then((res) => {
        const b = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
        const name = messages('setting.key296'/* 成本中心项-人员模板*/);
        FileSaver.saveAs(b, `${name}.xlsx`);
      });
  };

  cancelAll = (selectedRowKeys) => {
    this.setState({
      dataAll: false,
      selectedRowKeys: []
    });
  };

  dataAll = (selectedRowKeys) => {
    this.setState({
      dataAll: true,
      reverseSelectionMap: {}, // 点击一次全选全部就返回
      selectedRowKeys: [...selectedRowKeys]
    });
  };

  pageAll = (selectedRowKeys) => {
    this.onSelectChange(selectedRowKeys);
    this.setState({
      selectedRowKeys: [...selectedRowKeys]
    });
  };
  handleCostCenterExtendFiled = () => {
    const {infoData, costCenterExtendFiled} = this.state;
    const url = costCenterExtendFiled.url.replace(':costOid', this.props.params.id);
    const _url = url.replace(':formOID', infoData.formOID ? infoData.formOID : 'NEW');
    console.log('infoData', infoData);
    this.context.router.push(_url);
  };

  render() {
    const {
      columns, data, loading, pagination, infoList, infoData, updateState, editing, selectedRowKeys, downloading,
      costCenterItemName, fileList, showImportBankModel, flieUploading, progressImportErrInfo,
      errorsList, showImportErrInfo, showImportErrInfoForPerson
    } = this.state;
    const {tenantMode} = this.props;
    const rowSelection = {
      selectedRowKeys,
      hideDefaultSelections: true, // 去掉默认的
      onChange: this.onSelectChange,
      onSelection: this.onSelection,
      selections: [
        {
          key: 'data-all',
          text: messages('setting.key195'/* 全选全部*/),
          onSelect: this.dataAll
        },
        {
          key: 'page-all',
          text: messages('setting.key178'/* 全选当页*/),
          onSelect: this.pageAll
        },
        {
          key: 'cancel-all',
          text: messages('common.cancel'), // 取消
          onSelect: this.cancelAll
        },
      ]
    };
    const suffix = costCenterItemName ? <Icon type="close-circle" onClick={this.emitEmptyForDep}/> : null;

    const menu = (
      <Menu>
        <Menu.Item key={1}>
          <div
            onClick={() => {
              this.handleImportShow();
            }}>
            {messages('setting.key298'/* 导入成本中心项*/)}
          </div>
        </Menu.Item>
        <Menu.Item key={2}>
          <div
            onClick={() => {
              this.handleImportShowForPerson();
            }}>
            {messages('setting.key299'/* 导入成本中心项-人员*/)}
          </div>
        </Menu.Item>
      </Menu>
    );
    const menuExport = (
      <Menu>
        <Menu.Item key={3}>
          <ExportModal
            codeCheck
            exportTitle={messages('setting.key1751')/* 导出成本中心项*/}
            exportType="COSTCENTERITEM"
            exportCondition={{
              costCenterId: infoData.id
            }}
            exportCommand={'cost_center_item'}
          />
        </Menu.Item>
        <Menu.Item key={4}>
          <ExportModal
            codeCheck
            exportTitle={messages('setting.key1750')/* 导出成本中心项-人员*/}
            exportType="COSTCENTERITEM"
            exportCondition={{
              setOfBooksId: infoData.setOfBooksId
            }}
            exportCommand={'cost_center_item_with_user'}
          />
        </Menu.Item>
      </Menu>
    );
    const props = {
      onRemove: (file) => {
        this.setState(({fileList}) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({fileList}) => ({
          fileList: [file],
        }));
        return false;
      },
      fileList,
    };
    return (
      <div className="cost-center-detail">
        <BasicInfo
          infoList={infoList}
          isHideEditBtn
          infoData={infoData}
          updateState={updateState}
          loading={editing}/>
        <div className="table-header">
          <div className="table-header-title">
            {messages('common.total', {total: pagination.total})}
          </div>
          <div className="table-header-buttons">
            <div className="f-left">
              <Dropdown.Button
                type="primary"
                onClick={this.handleNew}
                overlay={menu}
                disabled={!tenantMode}>
                {messages('setting.key301'/* 新建成本中心项*/)}
              </Dropdown.Button>
            </div>
            <div className="f-left">
              <SelectDepOrPerson
                title={messages('setting.key300'/* 批量添加员工*/)}
                buttonDisabled={!tenantMode}
                onlyPerson
                onConfirm={this.batchAddPerson}/>
            </div>

            <div className="f-left">
              <Dropdown overlay={menuExport} placement="bottomCenter">
                <Button>{messages('setting.key382'/* 导出数据*/)}<Icon type="down"/></Button>
              </Dropdown>
            </div>
            <Button
              onClick={() => this.handleBatch('enabled')}
              disabled={!tenantMode}
            >
              {messages('common.enabled')}
            </Button>
            <Button
              onClick={() => this.handleBatch('disabled')}
              disabled={!tenantMode}
            >
              {messages('common.disabled')}
            </Button>

            <Button type="primary" disabled={!tenantMode} onClick={this.handleCostCenterExtendFiled}>
              {messages('setting.key363'/* 成本中心项扩展字段*/)}
            </Button>
            <div className="table-header-inp f-right">
              <Input
                className="cost-center-item-name-search"
                key={'costCenterItemName-search'}
                placeholder={messages('setting.key303'/* 输入成本中心项名称或编码*/)}
                prefix={<Icon type="search" style={{color: 'rgba(0,0,0,.25)'}}/>}
                suffix={suffix}
                value={costCenterItemName}
                onInput={this.onInputUserDepName}
                onChange={this.onChangeSetUserDepName}
                ref={node => this.userNameInput = node}/>
            </div>
          </div>
          <ResizeTable
            columns={columns}
            dataSource={data}
            pagination={pagination}
            loading={loading}
            rowKey="costCenterItemOID"
            bordered
            onChange={this.onChangePager}
            rowSelection={rowSelection}
            size="middle"
          />
          <Modal
            closable
            width={800}
            className="pm-import-person-modal"
            title={messages('setting.key304'/* 导入*/)}
            visible={showImportBankModel}
            footer={null}
            onCancel={this.cancelImport}
            destroyOnClose
          >
            <div className="import-person-modal-wrap">
              <div className="f-left import-person-modal-left">
                <div>
                  <p>{messages('setting.key305'/* 1.创建导入文件*/)} </p>
                  <p> {messages('setting.key306'/* 2.严格按照导入模板整理数据，检查必输事项是否缺少数据*/)}</p>
                  <p> {messages('setting.key307'/* 3.关闭文件后，方可进行数据导入*/)}</p>
                </div>
                <Button
                  className="default-color-font"
                  style={{border: 'none'}}
                  size={'small'}
                  icon="download"
                  loading={downloading}
                  onClick={this.downloadTemplate}>
                  {messages('setting.key295'/* 成本中心项模板*/)}
                </Button>

              </div>
              <div className="f-right import-person-modal-right">
                <div className="import-person-right-tips">
                  {messages('setting.key308'/* 上传模板*/)}
                </div>
                <div className="upload-file-wrap">

                  <Upload {...props}>
                    <Button>
                      <Icon type="upload"/>
                      {messages('setting.key309'/* 选择一个文件*/)}
                    </Button>
                  </Upload>
                  <Button
                    className="upload-file-start"
                    type="primary"
                    onClick={this.handleFileUpload}
                    disabled={fileList.length === 0}
                    loading={flieUploading}
                  >
                    {flieUploading ? messages('setting.key310'/* 上传中*/) : messages('setting.key311'/* 开始上传*/)}
                  </Button>
                </div>
              </div>
              <div className="clear"/>
            </div>
          </Modal>
          {/* 成本中心项*/}
          <ImportErrInfo
            progress={progressImportErrInfo}
            cancel={this.hideImportErrInfo}
            exportErrInfo={this.exportFailedLog}
            errorsList={errorsList}
            visible={showImportErrInfo}/>

          <Modal
            closable
            width={800}
            className="pm-import-person-modal"
            title={messages('setting.key304'/* 导入*/)}
            visible={this.state.showImportBankModelForPerson}
            footer={null}
            onCancel={this.cancelImportForPerson}
            destroyOnClose
          >
            <div className="import-person-modal-wrap">
              <div className="f-left import-person-modal-left">
                <div>
                  <p>
                    {messages('setting.key305'/* 1.创建导入文件*/)}
                  </p>
                  <p>
                    {messages('setting.key306'/* 2.严格按照导入模板整理数据，检查必输事项是否缺少数据*/)}
                  </p>
                  <p>
                    {messages('setting.key307'/* 3.关闭文件后，方可进行数据导入*/)}
                  </p>
                </div>
                <Button
                  className="default-color-font"
                  style={{border: 'none'}}
                  size={'small'}
                  icon="download"
                  loading={downloading}
                  onClick={this.downloadTemplatePerson}
                >
                  {messages('setting.key296'/* 成本中心项-人员模板*/)}
                </Button>

              </div>
              <div className="f-right import-person-modal-right">
                <div className="import-person-right-tips">
                  {messages('setting.key308'/* 上传模板*/)}
                </div>
                <div className="upload-file-wrap">

                  <Upload {...props}>
                    <Button>
                      <Icon type="upload"/>
                      {messages('setting.key309'/* 选择一个文件*/)}
                    </Button>
                  </Upload>
                  <Button
                    className="upload-file-start"
                    type="primary"
                    onClick={this.handleFileUploadForPerson}
                    disabled={fileList.length === 0}
                    loading={flieUploading}
                  >
                    {flieUploading ? messages('setting.key310'/* 上传中*/) : messages('setting.key311'/* 开始上传*/)}
                  </Button>

                </div>
              </div>
              <div className="clear"/>
            </div>
          </Modal>
          <ImportErrInfo
            progress={progressImportErrInfo}
            cancel={this.hideImportErrInfoForPerson}
            exportErrInfo={this.exportFailedLogForPerson}
            errorsList={errorsList}
            visible={showImportErrInfoForPerson}/>

          <a className="back" onClick={this.backToCostCenter}>
            <Icon type="rollback" style={{marginRight: '5px'}}/>
            {messages('common.back')}
          </a>
        </div>
      </div>
    );
  }
}

CostCenterDetail.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    user: state.login.user,
    company: state.login.company,
    tenantMode: state.main.tenantMode,
  };
}

export default connect(mapStateToProps)(CostCenterDetail);
